<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<meta name="author" content="yinq">
<title>日志</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- 基础样式库 -->
<link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/css/animate.min.css">
<link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/css/style.min.css">
<!-- 功能插件样式 -->
<link rel="stylesheet" href="{{cdn}}/static/v5/js/bootstrap-table/bootstrap-table.min.css">


</head>

<body>
<div class="container-fluid">

  <div class="row">

  	<div class="col-lg-12">
  	  <div class="card">
  	    <header class="card-header">
  	      <div class="card-title">网站操作日志</div>
  	    </header>
  		<div class="card-body">
  
        <table id="table"></table>
        	  

    </div>

  </div>

</div>
<script type="text/javascript" src="{{cdn}}/static/v5/js/jquery.min.js"></script>

<!--表格插件js-->
<script src="{{cdn}}/static/v5/js/bootstrap-table/bootstrap-table.js"></script>
<script src="{{cdn}}/static/v5/js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>






<!-- 弹框 -->
<script type="text/javascript" src="{{cdn}}/static/v5/example/js/layer/layer.js"></script>
<script>
    //设置需要显示的列
    var columns = [
        {
            field: 'username',
            title: '用户'
        }, {
            field: 'type',
            title: '操作类型'
        }, {
            field: 'log',
            title: '详情'
        }, {
            field: 'addtime',
            title: '操作时间'
        }
    ];

    //bootstrap table初始化数据
    var $table = $('#table').bootstrapTable({
        columns: columns,
        url: '/traffic/webgetData',
        method: 'post',
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        classes: "table table-bordered table-striped table-sm table-bordered table-striped", //设置表格样式
        // 后端分页设置
        pagination: true,
        sidePagination: "server", // 启用服务器端分页
        pageNumber: 1,
        pageSize: 10,
        pageList: [10, 20, 50, 100], // 修复pageList格式
        // 启用分页详细信息显示
        paginationDetailHAlign: 'left',
        paginationHAlign: 'right',
        paginationVAlign: 'bottom',
        paginationPreText: '‹',
        paginationNextText: '›',
        // 禁用缓存
        cache: false,
        // 确保每次分页都重新加载数据
        onPageChange: function (number, size) {
            console.log("Page changed to:", number, "Size:", size);
            // 表格会自动重新加载数据，无需手动处理
        },
        onPageSizeChange: function (number, size) {
            console.log("Page size changed to:", size);
            // 表格会自动重新加载数据，无需手动处理
        },
        // 使用query参数来传递分页信息
        queryParams: function(params) {
            // 确保参数正确传递，与后端代码匹配
            console.log("Sending params to server:", params);
            // 添加时间戳以防止缓存
            return {
                offset: params.offset,
                limit: params.limit,
                _t: new Date().getTime() // 添加时间戳防止缓存
            };
        },
        responseHandler: function(res) {
            // 处理后端返回的数据格式
            console.log("Received response:", res);
            
            // 检查响应是否是错误信息
            if (res && res.error) {
                console.error("Server error:", res.error);
                return {
                    total: 0,
                    rows: []
                };
            }
            
            // 检查响应是否包含数据
            if (res && res.data) {
                // 从响应中提取总记录数
                var total = 0;
                // 首先尝试从total字段获取
                if (res.total) {
                    total = res.total;
                } 
                // 如果没有total字段，尝试从page字段中提取
                else if (res.page) {
                    // 尝试从page字段中提取总记录数
                    var match = res.page.match(/共(\d+)条/);
                    if (match) {
                        total = parseInt(match[1]) || 0;
                    } else {
                        // 如果无法从page字段提取，尝试其他方式
                        console.log("Could not extract total from page field:", res.page);
                    }
                }
                
                // 如果无法从page字段提取总记录数，尝试从其他字段
                if (total === 0 && res.count) {
                    total = res.count;
                }
                
                return {
                    total: total,
                    rows: res.data || []
                };
            } else {
                // 如果响应格式不符合预期，尝试直接使用响应数据
                if (Array.isArray(res)) {
                    return {
                        total: res.length,
                        rows: res
                    };
                } else if (typeof res === 'object' && res !== null) {
                    // 尝试查找数据数组
                    for (var key in res) {
                        if (Array.isArray(res[key])) {
                            return {
                                total: res[key].length,
                                rows: res[key]
                            };
                        }
                    }
                }
                
                // 如果所有方法都失败，返回空数据
                console.log("Unexpected response format:", res);
                return {
                    total: 0,
                    rows: []
                };
            }
        }
    });
    
    // 添加手动刷新表格的方法
    function refreshTable() {
        console.log("Refreshing table...");
        $table.bootstrapTable('refresh');
    }
</script>
</body>
</html>